<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
.wrap{
width:100px;
height:160px;
margin:100px auto;
position: relation;
}
.wrap:BEFORE,.wrap:AFTER{
content:"";
width:100px;
height:160px;
background-color:red;
border-radius:50% 50% 0 0;
position: absolute;
}
.wrap:BEFORE{
transform:translateX(44px) rotate(45deg);
}
.wrap:AFTER{
transform: rotate(-45deg);
}
</style>
</head>
<body>
<div class="wrap"> </div>
<div class="wrap"> </div>
<div class="wrap"> </div>
<div class="wrap"> </div>
<div class="wrap"> </div>
</body>
</html>